<!-- recebe o titulo da pagina da controller -->
<h1><?php echo $this->titlePage; ?></h1>

<!-- cria um fomulario para buscar a descrição  -->
<form action="" method=get">
    <div class="formfield">
        <label for="">Nome:</label>
        <input id="nomeTipoDespesa" name="nomeTipoDespesa" type="text">
    </div>
    <div class="formbutton">
        <button id="btBuscarTipoDespesa" type="button">Buscar</button>
        <button id="btNovoTipoDespesa" type="button" value="/tipo-despesa/formulario">Novo</button> 
    </div>
</form>

<br />

<!-- grid para exibir os dados -->
<div id="divResTipoDespesa">

</div>

<br />

<br />

<script>
    //recebe a variavel do autocomplete da controller um array 
    var tipoDespesaAutoComplete = <?php echo Zend_Json::encode($this->dadosAutoComplete); ?>

    $(function(){
        //Melhora aparência dos botões
        $( "input[type=submit], button" ).button();
        //carrega o formulario para novo
        $('#btNovoTipoDespesa').click(function(){
            var url = $(this).attr('value');
            $('#ui-tabs-9').load(url);
            return false;
        });
    
        //faz com que funciione o autocomplete do buscar
        $( "#nomeTipoDespesa" ).autocomplete({
            source: tipoDespesaAutoComplete
        });
        //carrega a grid com tds tiposDespesa
        $('#divResTipoDespesa').load('/tipo-despesa/grid/nome/' + urlencodeGet($('#nomeTipoDespesa').val()));
        //Se usuarrio buscar por alguma descrição especifica o grid será carregado com ela
        $('#btBuscarTipoDespesa').click(function(){        
            var link = '/tipo-despesa/grid/nome/' + urlencodeGet($('#nomeTipoDespesa').val());
            $('#divResTipoDespesa').load(link);
        });
    }); 
    
</script>